<template>
    <el-form :model="data" :rules="mRules" ref="form" label-width="80px">
        <el-card>
            <div slot="header" class="clearfix">
                <span>{{option.title}}</span>
            </div>
            <div>
                <el-form-item label="菜单名" prop="title" :show-message="true">
                    <el-input v-model="data.title" placeholder="暂无数据"/>
                </el-form-item>
                <el-form-item label="菜单路由" prop="path">
                    <el-input v-model="data.path" placeholder="暂无数据"/>
                </el-form-item>
                <el-form-item label="重定向" prop="redirect">
                    <el-input v-model="data.redirect" placeholder="暂无数据"/>
                </el-form-item>
                <el-form-item label="图标" prop="icon">
                    <el-input v-model="data.icon" placeholder="暂无数据"/>
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input v-model="data.sort" placeholder="暂无数据"/>
                </el-form-item>
            </div>
            <div class="mi-card-bottom clearfix">
                <el-button type="text" class="button" @click="close()">取消</el-button>
                <el-button v-if="option.type==='insert'" type="text" class="button" @click="insert()">添加</el-button>
                <el-button v-if="option.type==='update'" type="text" class="button" @click="update()">修改</el-button>
            </div>
        </el-card>
    </el-form>
</template>

<script lang="ts">
    import {Component, Emit, Prop} from 'vue-property-decorator'
    import {API} from "@/core/api/API";
    import {ElForm} from "element-ui/types/form";
    import {mixins} from "vue-class-component";
    import BaseVue from "@/core/mixin/BaseVue";
    import {errorMsg, successMsg} from "@/core/utils/message";
    import $http from "@/core/utils/http";
    import {rule} from "@/core/utils/rule";
    import Kit from "@/core/mixin/Kit";
    import {copy} from "@/core/utils/Utils";

    @Component({
        name: 'MenuEdit',
        components: {},
    })
    export default class MenuEdit extends mixins(BaseVue, Kit) {
        @Prop({default: {}}) data!: any;
        @Prop({default: {type: 'insert', title: '添加'}}) option!: any;

        //关闭时是否刷新分页
        backRefresh: boolean = false;

        mRules = {
            title: [rule.notNullBlur()],
            sort: [rule.notNullBlur()],
            path: [rule.notNullBlur()],
        };

        //初始化
        async mounted() {
            this.data = copy(this.data);
        }

        //重新获取焦点
        activated() {
        }

        //失去焦点
        deactivated() {
        }

        //添加用户
        insert() {
            (this.$refs.form as ElForm).validate().then(() => {
                $http.post(API.sysMenuInsert, this.data).then((res: any) => {
                    if (res.success) {
                        this.backRefresh = true;
                        successMsg("已添加");
                    }
                });
            },).catch(() => {
                errorMsg("表单内容填写错误，请检查！");
            });
        }

        //修改用户
        update() {
            (this.$refs.form as ElForm).validate().then(() => {
                $http.post(API.sysMenuUpdate, this.data).then((res: any) => {
                    if (res.success) {
                        this.backRefresh = true;
                        successMsg("操作成功");
                    }
                });
            }).catch(() => {
                errorMsg("表单内容填写错误，请检查！");
            });
        }

        //关闭事件
        @Emit("close")
        close() {
            return {refresh: this.backRefresh};
        }
    }


</script>

<style scoped lang="scss">

</style>
